Pseudo-Elements and Replaced Elements in CSS
Pseudo-elements like ::before and ::after cannot be applied to replaced elements, such as <img>, <input>, <textarea>, <video>, or <iframe>. Replaced elements have intrinsic content defined by the browser or an external source, and pseudo-elements can only insert generated content into non-replaced elements.
Replaced elements have content that is not part of the HTML DOM structure (e.g., the image file itself).
Pseudo-elements like
::beforeand::afteronly work on elements that can contain text or other non-replaced content.Applying pseudo-elements to replaced elements will not render any visible output.
For decorative effects on replaced elements, consider wrapping them in a
<div>or<span>and applying pseudo-elements to the wrapper.
In this example, the ::before pseudo-element is applied to the wrapper <div> around the image, allowing you to add decorative overlays or effects without directly targeting the <img> element.
Do not apply
::beforeor::afterdirectly to replaced elements; it will not work.Use a wrapper element if you need pseudo-element-based decorations or overlays.
Style the pseudo-elements with
position,z-index, and other visual properties to achieve the desired effect.Test across browsers, as rendering behavior may differ slightly for replaced elements.